<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body style="margin: 0;">
  <canvas id="cvs" style="background-color:#000"></canvas>
</body>
<script>
  const cvs = document.querySelector('#cvs')
  const ctx = cvs.getContext('2d')
  const {clientWidth:width,clientHeight:height} = document.documentElement
  cvs.width =width
  cvs.height = height
  ctx.fillStyle = '#ffffff'
  const bgColors = Array.from(new Array(800)).map(v=>{
    return {
      x:Math.random() * width,
      y:Math.random() * height,
      step:Math.random() *2.5+0.5
    }
  })
  const render = ()=>{
    ctx.clearRect(0,0,width,height)
    ctx.beginPath()
    bgColors.forEach(v=>{
      v.y = v.y > height ? 0 :(v.y + v.step)
      ctx.rect(v.x,v.y,3,3)
    })
    ctx.fill()
    requestAnimationFrame(render)
  }
  render()
</script>
</html>